<script setup>
import { onMounted, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/userApi';
import { getVerifyCode } from '@/api/commonApi';
import sm4 from '@/utils/sm4';
import { useUserStore } from '@/store';

const router = useRouter();
const codeUrl = ref('');
const code = ref('');
const loginFormRef = ref(null);
const userStore = useUserStore();

const loginForm = ref({
    userName: '',
    password: '',
    code: '',
    codeId: ''
})

function getCodeUrl() {
    getVerifyCode()
        .then(res => {
            loginForm.value.code = '';
            code.value = res.headers.code;
            loginForm.value.codeId = res.headers.codeid;
            codeUrl.value = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
        })
}

function onLogin() {
    loginFormRef.value.validate().then(valid => {
        if (valid) {
            const form = JSON.parse(JSON.stringify(loginForm.value));
            form.password = sm4.encrypt(form.password);
            login(form)
                .then(res => {
                    userStore.$patch({
                        token: res.data.token,
                        userName: res.data.userName
                    })
                    router.push('/patient');
                })
                .catch(() => {
                    loginForm.value.password = '';
                    getCodeUrl();
                })
        }
    })
}

function onRegister() {

}


onMounted(() => {
    getCodeUrl();
});
</script>

<template>
    <div class="login">
        <div class="left">
            <header>
                <h1>ADR管理平台</h1>
            </header>
            <img class="img" src="@/assets/images/authentication.svg" alt="">
        </div>
        <div class="right">
            <div class="login-container">
                <h2 class="welcome">欢迎登陆 👋🏻</h2>
                <a-form
                    ref="loginFormRef"
                    :model="loginForm"
                >
                    <a-form-item name="userName" :rules="[{required: true, message: '请输入用户名'}]">
                        <a-input v-model:value="loginForm.userName" placeholder="请输入用户名" size="large">
                            <template #prefix><user-outlined /></template>
                        </a-input>
                    </a-form-item>
                    <a-form-item name="password" :rules="[{required: true, message: '请输入密码'}]">
                        <a-input 
                            v-model:value="loginForm.password" 
                            type="password" 
                            placeholder="请输入密码" 
                            size="large"
                            @keydown.enter="onLogin"
                        >
                            <template #prefix><LockOutlined /></template>
                        </a-input>
                    </a-form-item>
                    <a-form-item name="code" :rules="[{required: true, message: '请输入验证码'}]">
                        <div style="display: flex;">
                            <a-input
                                v-model:value="loginForm.code" 
                                placeholder="请输入验证码" 
                                size="large" 
                                style="margin-right: 14px"
                                @keydown.enter="onLogin"
                            />
                            <div>
                                <img :src="codeUrl" alt="" @click="getCodeUrl">
                            </div>
                        </div>
                    </a-form-item>
                    <a-form-item>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <a-checkbox>记住账号</a-checkbox>
                            <a-button type="link" @click="onRegister">注册新账号</a-button>
                        </div>
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" block @click="onLogin">登录</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    display: flex;

    header {
        width: 100%;
        display: flex;
        padding: 14px;
        position: fixed;
        top: 0;
        left: 0;
        h1 {
            font-size: 30px;
            color: @primary-color;
            font-weight: bold;
            font-family: SiYuan;
            margin-left: 14px;
        }
    }
    .left {
        border-right: 1px solid @border-color;
        width: 70vw;
        background: linear-gradient(154deg,#07070915 30%, hsl(212 100% 45% / 35%) 48%,#07070915 64%);
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
            width: 50vw;
            height: 50vh;
        }
    }
    .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .login-container {
            width: 70%;
            .welcome {
                font-size: 30px;
                color: #333;
                font-weight: bold;
            }
        }
    }
}
</style>